<template>
  <page-meta
    :page-style="'overflow:' + (pageshow ? 'hidden' : 'visible')"
  ></page-meta>
  <view class="page">
    <view class="context" v-if="comment">
      <item :style="{ width: '100%' }" :data="comment"></item>
      <view class="identifylabelids">
        <view @click="popupref?.open()" class="open">
          <view>
            {{ $t("编辑AI标签") }}
          </view>
          <view>
            <uv-icon size="14" name="arrow-right"></uv-icon>
          </view>
        </view>
        <view class="identifylabelids-button">
          <view
            v-for="(v, i) in form.aiidentifylabelids"
            :key="i"
            class="identifylabelids-button-item"
          >
            <uv-tags
              bgColor="#748ee2"
              borderColor="#748ee2"
              color="#ffffff"
              closable
              :text="$t(String(identifylabel.find((c) => c.id === v)?.name))"
              @close="form.aiidentifylabelids?.splice(i, 1)"
            >
            </uv-tags>
          </view>
        </view>
      </view>
      <view class="identifylabelids">
        <view class="open">
          <view class="title">
            <text>
              {{ $t("编辑产品标签") }}
            </text>
 
            <uv-icon name="info-circle" @click="circle"></uv-icon>
            
          </view>
        </view>
        <view class="identifylabelids-button">
          <view
            v-for="(v, i) in form.product"
            :key="i"
            class="identifylabelids-button-item"
          >
            <uv-tags
              bgColor="#748ee2"
              borderColor="#748ee2"
              color="#ffffff"
              closable
              :text="`${v.aiidentifylabelname} - ${v.name}`"
              @close="form.product?.splice(i, 1)"
            >
            </uv-tags>
          </view>
        </view>
      </view>
      <view>
        <uv-button @click="submit" :custom-style="submitButton">{{
          $t("确定")
        }}</uv-button>
      </view>
      <uni-popup ref="popupref" type="bottom" @change="popupchange">
        <view class="popuplabel">
          <identifylabelselect
            v-model="form.aiidentifylabelids"
            multiple
            @submit="popupref?.close"
          >
          </identifylabelselect>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import identifylabelselect from "../../components/aiidentifylabel/aiidentifylabelselect.vue";
import { ref } from "vue";
import api, { apiget } from "@/api";
import { useI18n } from "vue-i18n";
import { submitButton } from "@/util/style";
import item from "@/components/comment/item.vue";

const pageshow = ref(false);
const $t = useI18n().t;
const id = ref();
const identifylabel = ref<Eps.identifylabelEntity[]>([]);
onLoad((query) => {
  id.value = query?.id;
  if (!id.value) {
    uni.navigateBack();
    return;
  }
  apiget<Eps.BaseUserCommentEntity>("/wechat/comment/info?id=" + id.value)
    .then((e) => {
      comment.value = e;
      form.value = {
        id: id.value,
      };
      form.value.aiidentifylabelids = e.aiidentifycommentlabel.map((e: any) => {
        return String(e.aiidentifylabel?.id);
      });
      form.value.product = e.product || [];
      console.log(form.value);
    })
    .catch((f) => {
      uni.showToast({
        icon: "error",
        title: f,
        duration: 2000,
      });
    });
  api<Eps.identifylabelEntity[]>("/wechat/aiidentifylabel/list")
    .then((e) => {
      identifylabel.value = e;
    })
    .catch((f) => {
      uni.showToast({
        icon: "error",
        title: f,
        duration: 2000,
      });
    });
});

const comment = ref<Eps.BaseUserCommentEntity>();

const popupref = ref();

const form = ref<Eps.identifycommentEntity>({
  aiidentifylabelids: [],
});

function submit() {
  api("/wechat/aiidentifylabel/addlist", form.value)
    .then(() => {
      uni.showToast({
        title: $t("完成"),
        duration: 2000,
      });
      uni.navigateBack();
    })
    .catch((f) => {
      uni.showToast({
        title: $t("失败"),
        duration: 2000,
        icon: "error",
      });
      console.log(f);
    });
}

function circle() {
  uni.showToast({
    title: '菜品标签仅支持删除',
    icon: 'exception',
  })
}

function popupchange(e: { show: boolean; type: string }) {
  pageshow.value = e.show;
}
</script>

<style scoped lang="scss">
.context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 12rpx;
  font-size: 28rpx;
  color: #000000;

  .identifylabelids {
    margin-top: 28rpx;
    margin-bottom: 28rpx;
    background-color: rgba(242, 244, 250, 0.4);
    border-radius: 8px;
    width: 96vw;

    .open {
      display: flex;
      flex-wrap: wrap;
      padding: 24rpx;
      justify-content: space-between;
      border-bottom: 1rpx solid #e6e6e6;
      font-size: 28rpx;
      .title {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
      }
    }

    .identifylabelids-button {
      min-height: 160rpx;
      display: flex;
      flex-wrap: wrap;
      padding-left: 12rpx;
      padding-right: 12rpx;

      .identifylabelids-button-item {
        flex: none;
      }
    }
  }

  .changeisfeedback {
    width: 88vw;
  }

  .header-avatar {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    width: 96vw;
    margin-top: 24rpx;
    margin-bottom: 24rpx;

    .header_right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;

      .top {
        height: 43rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-weight: 600;
        color: #000;
        font-size: 32rpx;
      }
    }
  }
}

.popuplabel {
  height: 65vh;
  overflow-y: scroll;
  background-color: $uni-bg-color;
}
</style>
